<fieldset class="layui-elem-field layui-field-title">
  <legend>添加商品</legend>
</fieldset>

<style>
	#demo2 img{
		width: 92px;
		height: 92px;
	}
	#demo2 span{
		position: relative;
	}
	#demo2 span:hover::after{
		content: "X";
		display: block;
		background-color: #FF5722;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		position: absolute;
		line-height: 16px;
		color: #fff;
		text-align: center;
		top: -46px;
		right: 0px;
	}
</style>

<form class="layui-form" style="width: 620px;">
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入分类名" />
		</div>
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline">
			<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">一级分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent"></select>
		</div>
		<label class="layui-form-label">二级分类</label>
		<div class="layui-input-inline">
			<select name="goodsSortId">
				<option value=''>请选择二级分类</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品版本</label>
		<div class="layui-input-inline">
			<input type="text" name="version" class="layui-input" placeholder="请输入商品版本" />
		</div>
		<label class="layui-form-label">商品颜色</label>
		<div class="layui-input-inline">
			<input type="text" name="color" class="layui-input" placeholder="请输入商品颜色" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品套餐</label>
		<div class="layui-input-inline">
			<input type="text" name="suit" class="layui-input" placeholder="请输入商品套餐" />
		</div>
		<label class="layui-form-label">商品库存</label>
		<div class="layui-input-inline">
			<input type="number" name="count" class="layui-input" placeholder="请输入商品库存" />
		</div>
	</div>
	
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品描述</label>
		<div class="layui-input-block">
			<textarea name="dscp" placeholder="请输入内容" class="layui-textarea"></textarea>
		</div>
	</div>
	
	<div class="layui-form-item" >
		<label class="layui-form-label">商品图片</label>
		<div class="layui-input-block">
			<!-- 使用layui的上传图片的插件 -->
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test2">图片上传</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    预览图：
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" 
				lay-submit lay-filter="add">添加商品</button>
		</div>
	</div>
	
</form>

<script type="text/javascript">
	layui.use(['form', 'upload', 'element'], function(){
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		
		// 获取一级分类
		$.ajax({
			url: '/adminServer/api/goodsSorts',
			type: 'get',
			data: {},
			dataType: 'json',
			success: function(data){
				
				if (data.status == 200){
					var html = "<option value=''>请选择一级分类</option>";
					$.each(data.data.list, function(index, item){
						html += "<option value='"+item.id+"'>"+item.name+"</option>";
					});
					$("select[name='parent']").html(html);
					
					// 渲染表单
					form.render();
				}
			},
			error: function(){
				
			}
		});
		
		// 二级分类联动
		form.on('select(parent)', function(data){
			// 获取点击的一级分类
			var parent = data.value;
			
			if (parent > 0){
			
				// 获取二级分类
				$.ajax({
					url: '/adminServer/api/goodsSorts',
					type: 'get',
					data: {parent: parent},
					dataType: 'json',
					success: function(data){
						
						if (data.status == 200){
							var html = "<option value=''>请选择二级分类</option>";
							$.each(data.data.list, function(index, item){
								html += "<option value='"+item.id+"'>"+item.name+"</option>";
							});
							$("select[name='goodsSortId']").html(html);
							
							// 渲染表单
							form.render();
						} else {
							layer.alert(data.msg);
						}
					},
					error: function(){
						
					}
				});
			} else {
				$("select[name='goodsSortId']").html("<option value=''>请选择二级分类</option>");
				// 渲染表单
				form.render();
			}
		});
		
		
		//多图片上传
		upload.render({
		    elem: '#test2'
		    ,url: '/adminServer/api/upload' //此处配置你自己的上传接口即可
		    ,multiple: true
		    ,done: function(res){
		      //上传完毕 // 每一上传一张图片, 都会响应一次
			  $('#demo2').append('<span><img src="/adminServer/upload/'+ res.data +'" class="layui-upload-img">' +
								'<input type="hidden" name="picture" value="'+res.data+'"></span>')
			  
		    }
		});
		
		// 添加图片点击事件
		$("#demo2").on("click", "span", function(){
			$(this).remove();
		});
		
		// 表单提交
		form.on('submit(add)', function(data){
			
			// 获取所有的图片, 组成一个数组
			var pictures = [];
			$("input[name='picture']").each(function(){
				pictures.push( {name: $(this).val()} );
			});
			
			// 将数组放到data.field中
			data.field.pictures = pictures;
			
			$.ajax({
				url: '/adminServer/api/goods',
				type: 'post',
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8',
				dataType: 'json',
				success: function(data){
					if (data.status==201){
						// 跳转页面
						gotoUrl("goods/list.html");
					} else {
						layer.msg(data.msg||data.message);
					}
				},
				error: function(){					
				}
			});
			
			return false;
		});
	});
</script>
